<!--
@description ：服务计划轨迹
-->

<template>
  <div>
    <div class="track">
      <div v-for="(item, index) in list" :key="index" @click="actived = item.trackId">
        <div class="trackItem" :class="[index < list.length - 1 ? 'trackItemLine' : '', actived == item.trackId ? 'isTrackItemActived' : 'noTrackItemActived']">
          <img class="trackItem-img" :src="item.status == '1' ? require('../../../assets/renewal/success.png') : require('../../../assets/renewal/waiting.png')">
          <div class="trackItem-info"><div>{{ item.time }}</div><div>{{ item.task }}</div></div>
        </div>
      </div>
    </div>
    <div class="formListInfo">
      <el-form label-suffix=":" label-position="right" label-width="120px" ref="form" :model="form">
        <el-row :gutter="24">
          <div v-for="(item, index) in formList" :key="index" v-show="list.filter(e => e.trackId == actived)[0].type == item.type">
            <el-col v-for="(itm, ind) in item.children" :key="ind" :span="itm.colSpan">
              <el-form-item :label="itm.label || ''" :prop="itm.prop">
                <el-select v-model="itm.value" v-if="itm.type == 'select'" style="width: 260px" :disabled="list.filter(e => e.trackId == actived)[0].status == '1'">
                  <el-option v-for="s in enumopt[itm.option]" :key="s.dictValue" :value="s.dictValue" :label="s.dictLabel"></el-option>
                </el-select>
                <el-date-picker v-model="itm.value" placeholder="选择日期时间" v-if="itm.type == 'datetime'" :disabled="list.filter(e => e.trackId == actived)[0].status == '1'"
                                type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width: 260px">
                </el-date-picker>
                <el-input v-model="itm.value" type="textarea" :rows="3" v-if="itm.type == 'textarea'" style="width: 580px" :disabled="list.filter(e => e.trackId == actived)[0].status == '1'"></el-input>
              </el-form-item>
            </el-col>
            <div class="fromBtn">
              <el-button v-for="(e, i) in item.btns" :key="i" @click="e.btnFn" type="primary" size="mini">{{ e.label }}</el-button>
            </div>
          </div>
        </el-row>
      </el-form>
    </div>

    <el-dialog :close-on-click-modal="false" title="智能外呼记录" :visible.sync="waihuDia">
      <el-form label-width="120px" label-position="left" class="dialog-form0">
        <el-form-item v-for="(item,index) in waihuList" :label="item.label" :key="index">
          <span>{{item.text}}</span>
        </el-form-item>
        <div class="dialog-fromBtn">
          <el-button type="info" plain @click="downMP3">下载录音文件</el-button>
          <el-button type="primary" @click="waihuDia = false">确定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog :before-close="beforeCloseDialog" :visible.sync="audoVisible" title="播放通话记录" top="15% !important"
               width="300px">
      <div style="text-align: center;height: 50px;line-height: 50px;">
        <video ref="vueMiniPlayer" controls style="width: 100%; height: 100%">
          <source :src="fullAudioUrl" type="video/mp4"/>
        </video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "serviceTrack", //服务计划轨迹
  props:{

  },
  components:{

  },
  data(){
    const duanxingMsg = '尊敬的**先生/女士，您的保险合同（保单号*******）将于****年**月**日进入交费期，本次需交金额****元，我们将从您****银行尾号****的授权账户划转，请确保您的账户状态正常并存入足额保费。如有疑问，请与您的服务人员联系，或致电400-888-8888咨询。'
    return{
      // 1- 发送短信  2-智能外呼  3-人工服务
      list: [
        { trackId: '0', status: '1', time: '2024-07-24', type: '2', task: '智能外呼' },
        { trackId: '1', status: '0', time: '2024-08-13', type: '1', task: '发送短信' },
        { trackId: '2', status: '0', time: '2024-08-23', type: '3', task: '人工服务' },
        // { trackId: '4', status: '0', time: '2023-02-18', type: '3', task: '人工服务' },
      ],
      actived: '0',
      form: {

      },
      formList: [
        {
          type: '1',
          children: [
            { label: '发送短信', prop: 'a', type: 'datetime',  value: '2023-02-13 00:00:00',  disabled: true, colSpan: 24,},
            { label: '短信模板', prop: 'b', type: 'select',  value: '1', option: 'noteTempList',  disabled: true, colSpan: 24,},
            { label: '', prop: 'c', type: 'textarea',  value: duanxingMsg,  disabled: true, colSpan: 24,},
          ],
          btns: []
        },
        {
          type: '2',
          children: [
            { label: '外呼开始时间', prop: 'a', type: 'datetime',  value: '2023-02-13 09:00:00',  disabled: true, colSpan: 12,},
            { label: '外呼结束时间', prop: 'b', type: 'datetime',  value: '2023-02-13 09:08:13',  disabled: true, colSpan: 12,},
            { label: '外呼模板', prop: 'c', type: 'select',  value: '1', option: 'outboundTempList',  disabled: true, colSpan: 12,},
            { label: '是否接通', prop: 'd', type: 'select',  value: '1', option: 'isConnectList',  disabled: true, colSpan: 12,},
            { label: '客户意愿', prop: 'e', type: 'select',  value: '1', option: 'customerDesireList',  disabled: true, colSpan: 12,},
            { label: '是否二呼', prop: 'f', type: 'select',  value: '1', option: 'iaAgainCallList',  disabled: true, colSpan: 12,},
          ],
          btns: [
            { label: '播放通话记录', btnFn: this.play },
            { label: '查看外呼通话记录', btnFn: this.outboundReocrd }
          ]
        },
        {
          type: '3',
          children: [
            { label: '计划服务时间', prop: 'a', type: 'datetime',  value: '2023-02-13 00:00:00',  disabled: true, colSpan: 12,},
            { label: '计划服务方式', prop: 'b', type: 'select',  value: '1', option: 'servicePlanList',  disabled: true, colSpan: 12,},
            { label: '是否主管陪访', prop: 'c', type: 'select',  value: '1', option: 'isAccompanyingList',  disabled: true, colSpan: 12,},
            { label: '是否联系成功', prop: 'd', type: 'select',  value: '1', option: 'isSuccessContactList',  disabled: true, colSpan: 12,},
          ],
          btns: [
            { label: '查看详情服务记录', btnFn: this.accessReocrd }
          ]
        },
      ],
      enumopt: {
        noteTempList: [
          { dictValue: '1', dictLabel: '催交短信A模板' }
        ],
        outboundTempList: [
          { dictValue: '1', dictLabel: '应交催交前提醒' }
        ],
        isConnectList: [
          { dictValue: '1', dictLabel: '已接通' }
        ],
        customerDesireList: [
          { dictValue: '1', dictLabel: '宽一交费' }
        ],
        iaAgainCallList: [
          { dictValue: '1', dictLabel: '是' }
        ],
        servicePlanList: [
          { dictValue: '1', dictLabel: '面访客户' }
        ],
        isAccompanyingList: [
          { dictValue: '1', dictLabel: '是' }
        ],
        isSuccessContactList: [
          { dictValue: '1', dictLabel: '是' }
        ],
      },

      waihuDia: false,
      waihuList: [
        {
          label: "语音机器人：",
          text: "您好。",
        },
        {
          label: "客户：",
          text: "是。",
        },
        {
          label: "语音机器人：",
          text: "诶~您好，我是医惠锡城的服务专员，工号2218，医惠锡城2024保障已经开启，您这边已经续保了吗?",
        },
        {
          label: "客户：",
          text: "好。",
        },
        {
          label: "客户：",
          text: "喂，你好。",
        },
        {
          label: "客户：",
          text: "续了",
        },
        {
          label: "语音机器人：",
          text: "嗯嗯好的，那后续保障查询、理赔咨询您可以直接添加我们微信咨询，我这边加您微信。",
        },
        {
          label: "客户：",
          text: "用户无应答。",
        },
        {
          label: "语音机器人：",
          text: "喂，您好，在吗?",
        },
        {
          label: "客户：",
          text: "在在在，好的可以加。",
        },
        {
          label: "语音机器人：",
          text: "嗯好的，那我稍后加您，您留意一下微信里的服务通知，通过一下，或者在短信里【点击链接】添加服务管家哈~那先不打扰您了，祝您生活愉快。",
        },
        // {
        //   label: "客户：",
        //   text: "最近手头资金周转困难，我大约4月份交上吧，可以吗？",
        // },
        // {
        //   label: "语音机器人：",
        //   text: "可以的，为您记录宽一交费，届时会通过服务人员再次提醒您。",
        // },
        // {
        //   label: "客户：",
        //   text: "好的，谢谢。",
        // },
      ],
      fullaudiourl:'',
      audoVisible: false,
    }
  },
  watch:{

  },
  methods:{
    downMP3() {
      // 创建一个新的a标签
      let link = document.createElement("a");

      // 设置a标签的href属性为文件的URL
      link.href = this.fullaudiourl;

      // 设置download属性以指定下载的文件名
      link.download = "通话a.wav";

      // 将a标签添加到文档中（可选）
      document.body.appendChild(link);

      // 模拟点击a标签以触发下载操作
      link.click();

      // 从文档中移除a标签（可选）
      document.body.removeChild(link);
    },
    play(){
      this.audoVisible = true
      window.setTimeout(() => {
        this.$refs.vueMiniPlayer.currentTime = 0
      }, 100)
    },
    outboundReocrd(){
      this.waihuDia = true
    },
    // 人工服务记录
    accessReocrd(val){
      console.log('val::::::', val)
    },

    beforeCloseDialog(){
      this.$refs.vueMiniPlayer.pause()
      this.audoVisible = false
      this.fullAudioUrl = ''
    }
  },
  mounted() {
    this.api.getPlanDetail(this.$route.query.id || '1233655882465910785').then(res => {
      console.log(res);
      this.fullAudioUrl = res.data.fullaudiourl
    })
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

.track{
  display: flex;
  padding-left: 20px;
}

.trackItem{
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 8px;
  line-height: 26px;
  font-size: 16px;
  box-shadow: 0px 0px 10px 0px rgba(162, 162, 162, 0.25);
  position: relative;
  &:hover{
    cursor: pointer;
  }
}

.isTrackItemActived{
  border: 1px solid rgb(66, 101, 237);
}

.noTrackItemActived{
  border: 0;
}

.trackItem-img{
  width: 30px;
  height: 30px;
  position: absolute;
  left: -15px;
  z-index: 2; /* 将 z-index 设置为较高的值 */
}

.trackItem-info{
  margin: 0 8px 0 12px;
}

.trackItemLine{
  margin-right: 120px;
  position: relative;
  &::after{
    border: 1px dashed rgb(66, 101, 237);;
    content: '';
    height: 1px;
    width: 94px;
    position: absolute;
    top: 50%;
    right: -100px;
  }
}

.formListInfo{
  background: rgb(248, 248, 248);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 16px 0 8px;
  width: 880px;
}

.fromBtn{
  display: flex;
  justify-content: end;
  padding: 8px 32px 16px 0;
}

.dialog-fromBtn {
  display: flex;
  justify-content: center;
  padding: 16px 32px 0 0;
}
</style>
